<template>
  <div class="right-data">
    <n-layout
      content-style="overflow:visible"
      sider-placement="right"
      style="height: 100%; overflow: visible"
      has-sider
    >
      <n-layout-sider
        collapse-mode="width"
        :collapsed-width="20"
        :collapsed="systemConfig.dataSlideCollapsed"
        :width="280"
        :native-scrollbar="true"
        show-trigger="arrow-circle"
        :show-collapsed-content="false"
        :on-update:collapsed="slideCollapsedChange"
      >
        <div class="right-data-content">
          <page-configure></page-configure>
        </div>
      </n-layout-sider>
    </n-layout>
  </div>
</template>

<script lang="ts" setup>
  import useSystemConfig from '@/store/system';
  import pageConfigure from './pageConfigure.vue';
  const systemConfig = useSystemConfig();
  function slideCollapsedChange(collapsed: boolean) {
    systemConfig.updateDataSlideCollapsed(collapsed);
  }
</script>

<style scoped lang="scss"></style>
